import "./index.scss"
import {Button, View, Text} from "@tarojs/components"
import {observer} from "mobx-react"
import {useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import TimeIntervalPicker from "@/components/picker/timeIntervalPicker"
import {uEditUploadInterval, uSelectDevUploadInterval} from "@/api/setting"
import {AtInputNumber} from "taro-ui"

const Collectratesetting = () => {
	let router = useRouter()

	const [timeInterval, setTimeInterval] = useState<number | undefined>(undefined)

	function updatePageDataSource() {
		let devId = Number(router.params.devId)
		if (!devId || isNaN(devId)) return
		uSelectDevUploadInterval({devId})
			.then(res => {
				setTimeInterval(res.data)
			})
			.catch(_err => {
				clearInterval(timeInterval)
			})
	}

	function handleSubmit() {
		console.log(timeInterval)
		let devId = Number(router.params.devId)
		console.log(devId)
		if (!devId || isNaN(devId)) return

		if (timeInterval === undefined) return
		uEditUploadInterval({devId, intervalData: timeInterval})
			.then(res => {
				Taro.showToast({
					title: "修改成功"
				})
				updatePageDataSource()
			})
			.catch(err => {
				if (err && err.msg) {
					Taro.showModal({
						title: "提示",
						content: err.msg
					})
				}
			})
	}
	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Collectratesetting useEffect")
		updatePageDataSource()
	}, [router])
	// 对应 onShow
	useDidShow(() => {
		console.log("Collectratesetting useDidShow")
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Collectratesetting useDidHide")
	})

	const frequencyValueChange = data => {
		console.log(data)
		setTimeInterval(data)
		console.log(timeInterval)
	}

	return (
		<View className="container bg-xx_bg px-16 py-24">
			<View className="hanzi text-16 font-bold mb-14 flex items-center gap-x-6">
				<View className="hanzi">采集频率</View>
			</View>

			<View className="hanzi text-14 text-xx_text mb-30">
				<View>设置设备向您传送检测数据的时间段</View>
				<View>您可通过小程序随时查看实时数据以及报警信息</View>
			</View>

			{/* 数据采集次数 */}
			<View className="mb-96">
				<View className="text-14 text-black mb-12">数据采集次数</View>
				{/* <TimeIntervalPicker
					defaultTimeInterval={timeInterval}
					onChange={data => {
						setTimeInterval(data.timeInterval)
					}}
				></TimeIntervalPicker> */}
				<AtInputNumber
					min={1}
					max={1000}
					step={1}
					value={timeInterval}
					// width={100}
					onChange={data => {
						frequencyValueChange(data)
					}}
				/>
				<Text className="hanzi text-14 text-xx_text ml-12">分钟 / 次</Text>
			</View>
			<Button
				className="rounded-4 bg-primary flex items-center justify-center"
				onClick={handleSubmit}
			>
				<View className="text-white text-16">提交</View>
			</Button>
		</View>
	)
}
export default observer(Collectratesetting)
